React Suspense समन्वय: समांतर डेटा आणण्यात प्राविण्य मिळवणे

React Suspense ने एसिंक्रोनस ऑपरेशन्स, विशेषत: डेटा आणणे (data fetching) हाताळण्याच्या पद्धतीत क्रांती घडवली आहे. हे डेटा लोड होण्याची प्रतीक्षा करत असताना घटकांना (components) रेंडरिंग "थांबवण्याची" परवानगी देते, ज्यामुळे लोडिंग स्थिती व्यवस्थापित करण्याचा एक घोषणात्मक (declarative) मार्ग मिळतो. तथापि, केवळ Suspense सह वैयक्तिक डेटा फेच गुंडाळल्याने वॉटरफॉल इफेक्ट (waterfall effect) येऊ शकतो, जिथे एक फेच पूर्ण झाल्यावरच पुढचा सुरू होतो, ज्यामुळे कार्यक्षमतेवर नकारात्मक परिणाम होतो. हा ब्लॉग पोस्ट Suspense वापरून एकाधिक डेटा फेच समांतरपणे (in parallel) समन्वयित करण्यासाठी, तुमच्या ॲप्लिकेशनची प्रतिसाद देण्याची क्षमता (responsiveness) सुधारण्यासाठी आणि जागतिक स्तरावरील प्रेक्षकांसाठी वापरकर्त्याचा अनुभव वाढवण्यासाठी प्रगत धोरणांचा (strategies) अभ्यास करतो.

डेटा आणण्यात वॉटरफॉल समस्येचे आकलन

अशी कल्पना करा की तुम्हाला वापरकर्त्याचे नाव, अवतार (avatar) आणि अलीकडील ॲक्टिव्हिटी (activity) यासह प्रोफाइल (profile) दर्शवणे आवश्यक आहे. जर तुम्ही प्रत्येक डेटाचा भाग क्रमाने (sequentially) आणला, तर वापरकर्त्याला नावासाठी लोडिंग spinner दिसेल, त्यानंतर अवतारासाठी (avatar) आणि शेवटी, ॲक्टिव्हिटी फीडसाठी (activity feed). हे क्रमिक लोडिंग पॅटर्न (sequential loading pattern) वॉटरफॉल इफेक्ट (waterfall effect) तयार करते, संपूर्ण प्रोफाइलचे रेंडरिंग (rendering) বিলম্বित करते आणि वापरकर्त्यांना निराश करते. बदलत्या नेटवर्क गती (network speeds) असलेल्या आंतरराष्ट्रीय वापरकर्त्यांसाठी, हा विलंब आणखी जास्त असू शकतो.

हा सरळ केलेला (simplified) कोड स्निपेट (code snippet) विचारात घ्या:

function UserProfile() {
  const name = useName(); // वापरकर्त्याचे नाव आणते
  const avatar = useAvatar(name); // नावाच्या आधारावर अवतार आणते
  const activity = useActivity(name); // नावाच्या आधारावर ॲक्टिव्हिटी आणते

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

या उदाहरणामध्ये, useAvatar आणि useActivity हे useName च्या परिणामावर अवलंबून आहेत. हे एक स्पष्ट वॉटरफॉल (waterfall) तयार करते - useName पूर्ण होईपर्यंत useAvatar आणि useActivity डेटा आणणे सुरू करू शकत नाहीत. हे अक्षम (inefficient) आहे आणि एक सामान्य कार्यप्रदर्शन अडथळा (performance bottleneck) आहे.

Suspense सह समांतर डेटा आणण्यासाठी धोरणे

Suspense सह डेटा आणणे ऑप्टिमाइझ (optimize) करण्याची गुरुकिल्ली (key) म्हणजे एकाच वेळी (concurrently) सर्व डेटा विनंत्या सुरू करणे. येथे काही धोरणे आहेत जी तुम्ही वापरू शकता:

1. `React.preload` आणि रिसोर्सेस (Resources) सह डेटा प्रीलोड (Preload) करणे

सर्वात शक्तिशाली तंत्रांपैकी एक म्हणजे घटक (component) रेंडर (render) होण्यापूर्वी डेटा प्रीलोड (preload) करणे. यात "resource" (एक ऑब्जेक्ट (object) जो डेटा आणण्याचे वचन (promise) समाविष्ट करतो) तयार करणे आणि डेटा प्री-फेच (pre-fetch) करणे समाविष्ट आहे. `React.preload` यात मदत करते. ज्या वेळेस घटकाला (component) डेटाची आवश्यकता असते, तोपर्यंत तो आधीच उपलब्ध असतो, ज्यामुळे लोडिंग स्थिती जवळजवळ पूर्णपणे नाहीशी होते.

उत्पादन (product) आणण्यासाठी resource विचारात घ्या:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// वापर:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

आता, तुम्ही ProductDetails घटक (component) रेंडर (render) होण्यापूर्वी हा resource प्रीलोड (preload) करू शकता. उदाहरणार्थ, रूट (route) बदलताना किंवा hover वर.

React.preload(productResource);

हे सुनिश्चित करते की ProductDetails घटकाला (component) डेटाची आवश्यकता असताना तो डेटा उपलब्ध असण्याची शक्यता आहे, ज्यामुळे लोडिंग स्थिती कमी होते किंवा नाहीशी होते.

2. एकाच वेळी डेटा आणण्यासाठी `Promise.all` वापरणे

आणखी एक सोपा आणि प्रभावी दृष्टिकोन (approach) म्हणजे एकाच Suspense बाउंड्रीमध्ये (boundary) एकाच वेळी सर्व डेटा फेच सुरू करण्यासाठी Promise.all वापरणे. जेव्हा डेटा अवलंबित्व (dependencies) आधीपासूनच माहित असते तेव्हा हे चांगले कार्य करते.

चला वापरकर्ता प्रोफाइल (user profile) उदाहरण पुन्हा पाहूया. क्रमाने डेटा आणण्याऐवजी, आपण नाव, अवतार (avatar) आणि ॲक्टिव्हिटी फीड एकाच वेळी (concurrently) आणू शकतो:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'जॉन डो';
}

async function fetchAvatar(name) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'एक फोटो पोस्ट केला' },
    { id: 2, text: 'प्रोफाइल अपडेट केली' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>अ‍ॅव्‍हॅटर लोड करत आहे...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>ॲक्टिव्हिटी लोड करत आहे...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

तथापि, जर प्रत्येक Avatar आणि Activity देखील fetchName वर अवलंबून असेल, परंतु स्वतंत्र सस्पेंस बाउंड्रीमध्ये (suspense boundaries) रेंडर (render) केले असेल, तर आपण fetchName प्रॉमिसला (promise) पॅरेंटला (parent) उचलू शकता आणि React Context द्वारे प्रदान करू शकता.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'जॉन डो';
}

async function fetchAvatar(name) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'एक फोटो पोस्ट केला' },
    { id: 2, text: 'प्रोफाइल अपडेट केली' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>अ‍ॅव्‍हॅटर लोड करत आहे...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>ॲक्टिव्हिटी लोड करत आहे...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. समांतर फेच व्यवस्थापित करण्यासाठी कस्टम हुक (Custom Hook) वापरणे

संभाव्यतः सशर्त डेटा अवलंबित्व (conditional data dependencies) असलेल्या अधिक जटिल परिस्थितींसाठी, आपण समांतर डेटा आणणे व्यवस्थापित करण्यासाठी कस्टम हुक (custom hook) तयार करू शकता आणि एक रिसोर्स (resource) परत करू शकता जो Suspense वापरू शकेल.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('रिसोर्स अद्याप सुरू झालेला नाही');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// उदाहरण वापर:
async function fetchUserData(userId) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'वापरकर्ता ' + userId };
}

async function fetchUserPosts(userId) {
  // API कॉलचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'पोस्ट 1' }, { id: 2, title: 'पोस्ट 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>वापरकर्त्याचा डेटा लोड करत आहे...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

हा दृष्टिकोन (approach) प्रॉमिस (promises) आणि लोडिंग स्थिती व्यवस्थापित करण्याच्या जटिलतेस हुक (hook) मध्ये समाविष्ट करतो, ज्यामुळे कंपोनंटचा (component) कोड स्वच्छ आणि डेटा रेंडर (render) करण्यावर अधिक केंद्रित होतो.

4. स्ट्रीमिंग सर्व्हर रेंडरिंग (Streaming Server Rendering) सह निवडक हायड्रेशन (Selective Hydration)

सर्व्हर-रेंडर (server-render) केलेल्या ॲप्लिकेशन्ससाठी (applications), React 18 स्ट्रीमिंग सर्व्हर रेंडरिंग (streaming server rendering) सह निवडक हायड्रेशन (selective hydration) सादर करते. हे सर्व्हरवर उपलब्ध झाल्यावर HTML क्लायंटला चंक्समध्ये (chunks) पाठवण्यास अनुमती देते. आपण हळू लोड होणारे घटक (components) <Suspense> बाउंड्रीजमध्ये (boundaries) गुंडाळू शकता, ज्यामुळे उर्वरित पृष्ठ (page) इंटरॲक्टिव्ह (interactive) होऊ शकेल, तर हळू घटक (components) सर्व्हरवर लोड होत असतील. हे विशेषत: कमी नेटवर्क कनेक्शन (network connections) किंवा डिव्हाइस (devices) असलेल्या वापरकर्त्यांसाठी जाणवण्याजोगे कार्यप्रदर्शन (perceived performance) मोठ्या प्रमाणात सुधारते.

अशा परिस्थितीचा विचार करा जिथे एका वृत्तसंस्थेला जगाच्या विविध प्रदेशांतील लेख (articles) (उदा. आशिया, युरोप, अमेरिका) प्रदर्शित करणे आवश्यक आहे. काही डेटा स्रोत इतरांपेक्षा हळू असू शकतात. निवडक हायड्रेशन (selective hydration) जलद प्रदेशांतील लेख (articles) प्रथम दर्शविण्यास अनुमती देते, तर हळू प्रदेशांतील लेख (articles) लोड होत असतात, ज्यामुळे संपूर्ण पृष्ठ (page) अवरोधित (block) होण्यापासून प्रतिबंधित होते.

त्रुटी (Errors) आणि लोडिंग स्थिती हाताळणे

Suspense लोडिंग स्थिती व्यवस्थापन (loading state management) सुलभ करत असताना, त्रुटी हाताळणी (error handling) महत्त्वपूर्ण (crucial) आहे. त्रुटी बाउंड्रीज (error boundaries) (componentDidCatch लाइफसायकल (lifecycle) पद्धत (method) किंवा `react-error-boundary` सारख्या लायब्ररींमधील (libraries) useErrorBoundary हुक (hook) वापरून) आपल्याला डेटा आणताना किंवा रेंडरिंग (rendering) करताना उद्भवणाऱ्या त्रुटी (errors) ग्रेसफुली (gracefully) हाताळण्याची परवानगी देतात. संपूर्ण ॲप्लिकेशन क्रॅश (crash) होण्यापासून रोखण्यासाठी या त्रुटी बाउंड्रीज (error boundaries) विशिष्ट Suspense बाउंड्रीजमधील (boundaries) त्रुटी (errors) पकडण्यासाठी धोरणात्मक (strategically) ठिकाणी ठेवल्या पाहिजेत.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... डेटा आणते ज्यात त्रुटी येऊ शकतात
}

function App() {
  return (
    <ErrorBoundary fallback={<div>काहीतरी गडबड झाली!</div>}>
      <Suspense fallback={<div>लोड होत आहे...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

लोडिंग (loading) आणि त्रुटी (error) स्थिती (states) दोघांसाठी माहितीपूर्ण आणि वापरकर्ता-अनुकूल (user-friendly) फॉलबॅक (fallback) UI प्रदान करण्याचे लक्षात ठेवा. हे विशेषत: आंतरराष्ट्रीय वापरकर्त्यांसाठी महत्वाचे आहे ज्यांना कमी नेटवर्क गती (network speeds) किंवा प्रादेशिक सेवा खंडित (regional service outages) होण्याचा सामना करावा लागतो.

Suspense सह डेटा आणणे ऑप्टिमाइझ (Optimize) करण्यासाठी सर्वोत्तम पद्धती

• महत्वाचा डेटा ओळखा आणि त्याला प्राधान्य द्या: आपल्या ॲप्लिकेशनच्या (application) प्रारंभिक रेंडरिंगसाठी कोणता डेटा आवश्यक आहे हे निश्चित करा आणि तो डेटा प्रथम आणण्यास प्राधान्य द्या.
• शक्य असल्यास डेटा प्रीलोड (Preload) करा: घटक (components) आवश्यक असण्यापूर्वी डेटा प्रीलोड (preload) करण्यासाठी `React.preload` आणि रिसोर्सेस (resources) वापरा, ज्यामुळे लोडिंग स्थिती कमी होईल.
• एकाच वेळी (Concurrently) डेटा आणा: एकाच वेळी (parallel) अनेक डेटा फेच सुरू करण्यासाठी `Promise.all` किंवा कस्टम हुक (custom hooks) वापरा.
• API एंडपॉइंट्स (Endpoints) ऑप्टिमाइझ (Optimize) करा: आपले API एंडपॉइंट्स (endpoints) कार्यक्षमतेसाठी ऑप्टिमाइझ (optimize) केलेले असल्याची खात्री करा, ज्यामुळे लेटेंसी (latency) आणि पेलोड आकार (payload size) कमी होईल. आपल्याला आवश्यक असलेला डेटा फेच (fetch) करण्यासाठी GraphQL सारख्या तंत्रांचा वापर करण्याचा विचार करा.
• कॅशिंग (Caching) अंमलात आणा: API विनंत्यांची संख्या कमी करण्यासाठी वारंवार ॲक्सेस (access) केलेला डेटा कॅशे (cache) करा. मजबूत कॅशिंग (caching) क्षमतांसाठी `swr` किंवा `react-query` सारख्या लायब्रऱ्या (libraries) वापरण्याचा विचार करा.
• कोड स्प्लिटिंग (Code Splitting) वापरा: प्रारंभिक लोड वेळ कमी करण्यासाठी आपल्या ॲप्लिकेशनला (application) लहान चंक्समध्ये (chunks) विभाजित करा. आपल्या ॲप्लिकेशनचे (application) विविध भाग हळूहळू लोड (load) आणि रेंडर (render) करण्यासाठी Suspense सह कोड स्प्लिटिंग (code splitting) एकत्र करा.
• कार्यक्षमतेचे निरीक्षण करा: कार्यक्षमतेतील अडथळे (performance bottlenecks) ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी लाइthouse (Lighthouse) किंवा वेबपेजटेस्ट (WebPageTest) सारख्या साधनांचा (tools) वापर करून आपल्या ॲप्लिकेशनच्या (application) कार्यक्षमतेचे नियमितपणे निरीक्षण करा.
• त्रुटी (Errors) ग्रेसफुली (Gracefully) हाताळा: डेटा आणताना आणि रेंडरिंग (rendering) करताना त्रुटी (errors) पकडण्यासाठी त्रुटी बाउंड्रीज (error boundaries) अंमलात आणा, वापरकर्त्यांना माहितीपूर्ण त्रुटी संदेश (error messages) प्रदान करा.
• सर्व्हर-साइड रेंडरिंग (Server-Side Rendering) (SSR) चा विचार करा: SEO आणि कार्यक्षमतेच्या कारणांसाठी, जलद प्रारंभिक अनुभव देण्यासाठी स्ट्रीमिंग (streaming) आणि निवडक हायड्रेशन (selective hydration) सह SSR वापरण्याचा विचार करा.

निष्कर्ष

React Suspense, जेव्हा समांतर डेटा आणण्यासाठी धोरणांशी (strategies) एकत्र केले जाते, तेव्हा प्रतिसाद देणारी (responsive) आणि कार्यक्षम वेब ॲप्लिकेशन्स (web applications) तयार करण्यासाठी एक शक्तिशाली टूलकिट (toolkit) प्रदान करते. वॉटरफॉल समस्येचे आकलन करून आणि प्रीलोडिंग (preloading), Promise.all सह एकाच वेळी (concurrent) आणणे आणि कस्टम हुक (custom hooks) यांसारख्या तंत्रांची अंमलबजावणी करून, आपण वापरकर्त्याचा अनुभव लक्षणीयरीत्या सुधारू शकता. त्रुटी (errors) ग्रेसफुली (gracefully) हाताळण्याचे आणि जागतिक स्तरावर (worldwide) वापरकर्त्यांसाठी आपले ॲप्लिकेशन (application) ऑप्टिमाइझ (optimize) केलेले असल्याची खात्री करण्यासाठी कार्यक्षमतेचे निरीक्षण करण्याचे लक्षात ठेवा. React जसजसे विकसित होत आहे, तसतसे स्ट्रीमिंग (streaming) आणि निवडक हायड्रेशन (selective hydration) सह सर्व्हर रेंडरिंग (server rendering) सारखी नवीन वैशिष्ट्ये (features) शोधणे, स्थान (location) किंवा नेटवर्क (network) स्थिती (conditions) विचारात न घेता, आपल्याला असाधारण वापरकर्ता अनुभव (user experiences) वितरीत करण्याची आपली क्षमता आणखी वाढवेल. या तंत्रांचा स्वीकार करून, आपण अशी ॲप्लिकेशन्स (applications) तयार करू शकता जी केवळ कार्यक्षमच नाहीत तर आपल्या जागतिक प्रेक्षकांसाठी (global audience) वापरण्यास आनंददायी आहेत.

या ब्लॉग पोस्टचा (blog post) उद्देश React Suspense सह समांतर डेटा आणण्याच्या धोरणांचा (strategies) एक व्यापक (comprehensive) आढावा (overview) प्रदान करणे आहे. आम्हाला आशा आहे की आपल्याला हे माहितीपूर्ण आणि उपयुक्त वाटले असेल. आम्ही आपल्याला आपल्या स्वतःच्या प्रोजेक्टमध्ये (projects) या तंत्रांचा प्रयोग (experiment) करण्यास आणि आपले निष्कर्ष समुदायासह (community) सामायिक (share) करण्यास प्रोत्साहित करतो.